import { Component, PropsWithChildren } from "react";
import { View, Button, Text, Label, Checkbox } from "@tarojs/components";
import { observer, inject } from "mobx-react";

import Hello from "../../components/Hello";

import "./index.scss";

type PageStateProps = {
  store: {
    counterStore: {
      counter: number;
      increment: Function;
      decrement: Function;
      incrementAsync: Function;
    };
  };
};

interface Index {
  props: PageStateProps;
}

@inject("store")
@observer
class Index extends Component<PropsWithChildren> {
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  increment = () => {
    const { counterStore } = this.props.store;
    counterStore.increment();
  };

  decrement = () => {
    const { counterStore } = this.props.store;
    counterStore.decrement();
  };

  incrementAsync = () => {
    const { counterStore } = this.props.store;
    counterStore.incrementAsync();
  };

  render() {
    const {
      counterStore: { counter },
      todoStore: { list },
      todoStore,
    } = this.props.store;

    return (
      <View className="index">
        <Button onClick={this.increment}>+</Button>
        <Button onClick={this.decrement}>-</Button>
        <Button onClick={this.incrementAsync}>Add Async</Button>
        <Text>{counter}</Text>

        <Button
          onClick={() => {
            todoStore.addTodo("打豆豆");
          }}
        >
          AddTodo
        </Button>
        <View>
          {list.map((item) => (
            <Label key={item.id}>
              <Checkbox value="''" />
              <Text>{item.text}</Text>
            </Label>
          ))}
        </View>

        <Hello />
      </View>
    );
  }
}

export default Index;
